<template lang="html">
  <div id="recordcontentone">
    <div class='recordcontent-box'>
      <div v-for='(item,index) in symptom' :key='index' class='box-content' @click='BoxHander(item)'>
        <div :class='[item.flag ? "box-block" : "box-hollow"]'></div>
        <a class='recordcontent-box-text'>{{ item.name }}</a>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name:'RecordContentOne',
  data(){
    return{
      wanquan:[]
    }
  },
  props:{
    symptom:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  methods:{
    BoxHander(item){
      if(item.flag == true){
        item.flag = false 
        for(var i=0 ; i< this.wanquan.length; i++){
          if(this.wanquan[i].name == item.name){
            return
           }       
        }
        this.wanquan.push(item)
      }else{
        item.flag = true
        let shanchu = this.wanquan.pop(item)
      }
    }
  }
}
</script>

<style lang='less' scoped>
#recordcontentone{
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #f1f1f1;
  padding:0 10%;
  .recordcontent-box{
    width: 80%;
    float: left;
    .box-content{
      height: 0.6rem;
      line-height:0.6rem;
      width: 50%;
      float: left;
      .box-block{
        width: 0.3rem;
        height: 0.3rem;
        float: left;
        border:1px solid #717171;
        border-radius: 5px;
        margin:0.14rem;
      }
      .box-hollow{
        width: 0.3rem;
        height: 0.3rem;
        float: left;
        background: #717171;
        border:1px solid #717171;
        border-radius: 5px;
        margin:0.14rem;
      }
      .recordcontent-box-text{
        border:1px solid #717171;
        border-radius: 0.3rem;
        padding:0.07rem;
      }
    }
  }
}
</style>
<style>
.{
  border-radius: ;
}
</style>